<template>
  <div class="app-container">
    <el-form ref="listQuery" :model="listQuery" :inline="true">
      <el-form-item label="项目名称" prop="title">
        <el-input
          v-model="listQuery.title"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 180px"
          @keyup.enter.native="getList"
        />
      </el-form-item>

      <el-form-item label="上报时间">
        <el-date-picker
          v-model="timeValue"
          clearable
          size="small"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="getList"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="getList"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="small"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="ticketList"
      stripe
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="#" type="index" width="80" align="center" />
      <el-table-column
        label="项目名称"
        prop="title"
        align="center"
        :show-overflow-tooltip="true"
      />

      <el-table-column
        label="项目分类"
        :show-overflow-tooltip="true"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <span>
            {{ formatProjectClassify(scope.row.form_data) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="上报时间"
        align="center"
        prop="create_time"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="流转状态"
        :show-overflow-tooltip="true"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">未提交</span>
          <span v-if="scope.row.status === 2">已撤回</span>
          <span v-if="scope.row.status === 0">
            {{ scope.row.state_name }}
          </span>
          <span v-if="scope.row.status === 3">
            已驳回
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="提交状态"
        :show-overflow-tooltip="true"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1">草稿</span>
          <span v-if="scope.row.status === 2">已撤回</span>
          <div v-if="scope.row.status === 0">
            <span v-if="scope.row.is_end === 0">处理中</span>
            <span v-else>已结束</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="结果"
        :show-overflow-tooltip="true"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.status === 1">
            <el-tag
              v-if="scope.row.is_end === 0"
              type="info"
              effect="dark"
            >未提交</el-tag>
          </div>
          <div v-if="scope.row.status === 2">
            <el-tag type="danger" effect="dark">已撤回</el-tag>
          </div>
          <div v-if="scope.row.status === 3">
            <el-tag type="danger" effect="dark">已驳回</el-tag>
          </div>
          <div v-if="scope.row.status === 0">
            <el-tag
              v-if="scope.row.is_end === 0"
              type="warning"
              effect="dark"
            >处理中</el-tag>
            <el-tag v-else type="success" effect="dark">已办结</el-tag>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="250"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status != 1"
            size="mini"
            type="text"
            icon="el-icon-document"
            @click="handleView(scope.row)"
          >表单数据</el-button>
          <el-button
            v-if="scope.row.status === 0 && scope.row.is_denied === 1"
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="handleHistoryView(scope.row)"
          >查看进度</el-button>
          <el-button
            v-if="scope.row.status === 0 && scope.row.is_denied === 0"
            size="mini"
            type="text"
            icon="el-icon-time"
            @click="handleHistoryView(scope.row)"
          >审批历史</el-button>

          <el-button
            v-if="scope.row.status === 1"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑提交</el-button>
          <el-button
            v-if="scope.row.status === 3 || scope.row.status === 2"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑重新提交</el-button>
          <el-button
            v-if="scope.row.status === 1"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageIndex"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <ReviewDialog ref="reviewDialog" @refreshTable="getList" />
    <EditDialog ref="editDialog" @refreshTable="getList" />
    <HistoryDialog ref="historyDialog" />
  </div>
</template>

<script>
import {
  workOrderList,
  reopenWorkOrder,
  deleteWorkOrder
} from '@/api/xjs/work-order'

// 搜索
import WorkOrderSearch from '@/views/xjsxxm/apply/components/search/index'
import ReviewDialog from '@/views/xjsxxm/apply/components/review'
import HistoryDialog from '@/views/xjsxxm/components/history'
import EditDialog from '@/views/xjsxxm/apply/components/editDialog'
import { parseTime } from '@/utils'
export default {
  name: 'MyApply',
  components: { WorkOrderSearch, ReviewDialog, HistoryDialog, EditDialog },
  data() {
    return {
      timeValue: '',
      users: [],
      nodeList: [],
      queryParams: {},
      total: 0,
      loading: false,
      ticketList: [],
      listQuery: {
        page: 1,
        per_page: 10
      },
      ruleForm: {
        work_order_id: '',
        node_id: '',
        user_id: '',
        remarks: ''
      },
      rules: {
        node_id: [{ required: true, message: '请选择节点', trigger: 'change' }],
        user_id: [{ required: true, message: '请选择用户', trigger: 'change' }]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    resetQuery() {
      this.timeValue = ''
      this.resetForm('listQuery')
      this.getList()
    },
    formatProjectClassify(val) {
      const jsonObj = JSON.parse(val)
      return jsonObj['project_classify']
    },
    formatProjectName(val) {
      const jsonObj = JSON.parse(val)
      return jsonObj['project_name']
    },
    getList() {
      this.loading = true
      if (
        this.timeValue === null ||
        this.timeValue === undefined ||
        this.timeValue === ''
      ) {
        this.listQuery.startTime = ''
        this.listQuery.endTime = ''
      } else {
        this.listQuery.startTime = parseTime(this.timeValue[0])
        this.listQuery.endTime = parseTime(this.timeValue[1])
      }
      this.listQuery.page = this.queryParams.pageIndex
      this.listQuery.per_page = this.queryParams.pageSize
      this.listQuery.classify = 2
      workOrderList(this.listQuery).then(response => {
        this.ticketList = response.data.data
        this.queryParams.pageIndex = response.data.page
        this.queryParams.pageSize = response.data.per_page
        this.total = response.data.total_count
        this.loading = false
      })
    },
    handleView(row) {
      this.$refs.reviewDialog.open(row.process, row.id)
    },
    handleEdit(row) {
      this.$refs.editDialog.open(row.process, row.id)
    },
    handleHistoryView(row) {
      this.$refs.historyDialog.open(row.process, row.id)
    },
    handleSearch(val) {
      for (var k in val) {
        this.listQuery[k] = val[k]
      }
      this.getList()
    },

    handleReopen(id) {
      this.$confirm('根据此工单新建一个新的工单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        reopenWorkOrder(id).then(res => {
          this.getList()
          this.$message({
            type: 'success',
            message: '成功!'
          })
        })
      })
    },
    handleSelectionChange() {},
    handleDelete(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteWorkOrder(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}
</script>

<style scoped></style>
